<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function fn1() {
      console.log("fn1...");
    }

    function fn2() {
      console.log("fn2...");
    }

    function fn3() {
      console.log("fn3...");
    }

    let handle = {};
    // {"myevent":[fn1,fn2,fn3],}
    function addEvent(eventName, fn) {
      // 保存事件；
      if (!(eventName in handle)) {
        handle[eventName] = [];
      }
      handle[eventName].push(fn);
    }

    function removeEvent(eventName, fn) {
      if (eventName in handle) {
        handle[eventName] = handle[eventName].filter((event) => {
          return event !== fn;
        });
      }
    }

    function trigger(eventName) {
      if (typeof handle[eventName] !== "undefined") {
        handle[eventName].forEach((event) => {
          event();
        });
      }
    }
    // 绑定自定义事件
    addEvent("myevent", fn1);
    addEvent("myevent", fn2);
    addEvent("myevent", fn3);
    // console.log(handle);
    // 触发自定义事件
    removeEvent("myevent", fn2);
    trigger("myevent");
  </script>
</html>
